<template>
  <!-- 首页 -->
  <div class="container">
    <div class="nav-Bar">
      <el-menu mode="horizontal" :default-active="defaultActive" router>
        <el-row :gutter="0" type="flex" justify="space-between">
          <el-col :span="8">
            <el-row :gutter="20">
              <el-col :xl="4" :md="6" :offset="0">
                <el-submenu index="/dashboard">
                  <template slot="title">
                    <router-link to="/dashboard">首页</router-link>
                  </template>
                  <div class="submenu-item">
                    <el-menu-item
                      class="menu-item"
                      v-for="item in navList.slice(0, 3)"
                      :key="item.id"
                      index="/type"
                      :route="{ name: 'type', query: { typeId: item.id } }"
                      >{{ item.title }}</el-menu-item
                    >
                  </div>

                  <div class="submenu-item">
                    <el-menu-item
                      class="menu-item"
                      v-for="item in navList.slice(3, 6)"
                      :key="item.id"
                      index="/type"
                      :route="{ name: 'type', query: { typeId: item.id } }"
                      >{{ item.title }}</el-menu-item
                    >
                  </div>

                  <div class="submenu-item">
                    <el-menu-item
                      class="menu-item"
                      v-for="item in navList.slice(6, 9)"
                      :key="item.id"
                      index="/type"
                      :route="{ name: 'type', query: { typeId: item.id } }"
                      >{{ item.title }}</el-menu-item
                    >
                  </div>
                </el-submenu>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="0" type="flex" justify="center">
              <el-col :span="15">
                <el-menu-item>
                  <el-popover
                    :visible-arrow="visibleArrow"
                    ref="popover"
                    placement="top"
                    width="340"
                    v-model="visablePopover"
                    trigger="manual"
                  >
                    <div v-if="!searchNoResult" class="search-conatiner">
                      <el-scrollbar style="height: 100%">
                        <div
                          class="search-item-conatiner"
                          @click="toVideo(searchItem.id)"
                          v-for="searchItem in searchList"
                          :key="searchItem.id"
                        >
                          {{ searchItem.title }}
                        </div>
                      </el-scrollbar>
                    </div>

                    <div v-else>
                      <span>搜索没有结果~</span>
                    </div>

                    <el-input
                      style="width: 350px"
                      slot="reference"
                      v-model="inputKey"
                      placeholder="找找有没有你想看的~"
                      size="normal"
                      @input="searchViedeo"
                      @focus="onFocus"
                      @blur="close"
                    >
                    </el-input>
                  </el-popover>
                </el-menu-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="20">
              <el-col :span="3" :offset="1">
                <el-dropdown :disabled="isLogin" @command="handleCommand">
                  <el-menu-item index="/personal">
                    <el-image
                      style="width: 40px; height: 40px"
                      :src="avatar"
                      fit="fill"
                    ></el-image>
                  </el-menu-item>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="loginPath"
                      >立即登录</el-dropdown-item
                    >
                    <el-dropdown-item :command="registerPath"
                      >注册</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
              <el-col :span="4" :offset="0">
                <el-dropdown :disabled="!isLogin" @command="handleCommand">
                  <span class="el-dropdown-link">
                    <el-menu-item index="/message">消息</el-menu-item>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="item in aboutMyList"
                      :command="item.path"
                      :key="item.path"
                      >{{ item.name }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
              <el-col :span="4" :offset="0">
                <el-menu-item index="/collect"> 收藏 </el-menu-item>
              </el-col>
              <el-col :span="4" :offset="0">
                <el-menu-item index="/history">历史</el-menu-item>
              </el-col>
              <el-col :span="4" :offset="0">
                <el-menu-item index="/uploading">投稿</el-menu-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-menu>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import VideoTabPane from "@/component/videoTabPane.vue";
import { getParentList } from "../api/channelApi";
import { getByKey } from "../api/videoApi";
export default {
  components: {
    VideoTabPane,
  },
  computed: {
    isLogin() {
      return sessionStorage.getItem("token") == null ? false : true;
    },
    avatar() {
      return sessionStorage.getItem("avatar") == null
        ? "http://10.24.17.72:8088/avatar.png"
        : sessionStorage.getItem("avatar");
    },
  },
  data() {
    return {
      searchNoResult: false,
      visibleArrow: false,
      searchList: null,
      visablePopover: false,
      tabPaneTitleList: [
        {
          label: "收藏",
          name: "收藏",
        },
        {
          label: "稍后再看",
          name: "稍后再看",
        },
      ],
      isCollect: true,
      defaultActive: "",
      loginPath: "/login",
      registerPath: "/register",
      aboutMyList: [
        {
          name: "回复我的",
          path: "/message/replyToMine",
        },
        {
          name: "@我的",
          path: "/message/aiteMine",
        },
        {
          name: "收到的赞",
          path: "/message/receivedPraise",
        },
        {
          name: "系统通知",
          path: "/message/systemNotification",
        },
        {
          name: "我的消息",
          path: "/message/myMessage",
        },
      ],
      inputKey: "",
      navList: [],
    };
  },
  methods: {
    close() {
      this.inputKey = "";
      this.$refs.popover.doClose();
    },
    toVideo(id) {
      this.$router.push({
        name: "video",
        query: {
          id: id,
        },
      });
      this.cleanInputKey();
      this.visablePopover = false;
    },
    onFocus() {
      this.visablePopover = !this.inputKey == "";
    },
    searchViedeo() {
      if (this.inputKey != "") {
        getByKey(this.inputKey)
          .then((res) => {
            if (res.data.code == 200) {
              this.searchList = res.data.data.rows;
              this.searchNoResult = false;
              this.visablePopover = true;
            } else {
              this.searchNoResult = true;
              this.visablePopover = true;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.cleanInputKey();
        this.visablePopover = false;
      }
    },
    cleanInputKey() {
      this.inputKey = "";
      this.searchList = [];
    },
    handleCommand(path) {
      const currentPath = this.$router.history.current.fullPath;
      if (currentPath !== path) {
        this.$router.push(path);
      }
    },
    setDefaultActive() {
      const currentPath = this.$router.history.current.fullPath;
      const pathArray = currentPath.split("/");
      this.defaultActive = "/" + pathArray[1];
    },
    getNavList() {
      getParentList()
        .then((res) => {
          this.navList = res.data.data;
        })
        .catch((err) => {
          console.log(res);
        });
    },
  },
  created() {
    this.setDefaultActive();
    this.getNavList();
  },
  updated() {
    this.setDefaultActive();
  },
};
</script>

<style lang="scss" scoped>
@import url(../common/common.css);

.nav-Bar {
  z-index: 1;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  width: 100%;
}

.menu-item {
  width: 80px;
}

.search-item-conatiner {
  width: 100%;
  height: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}

.search-item-conatiner:hover {
  color: #409eff;
  cursor: pointer;
}

.search-conatiner {
  height: 200px;
  width: 100%;
  overflow: hidden;
}
</style>
